<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content='text/html; charset=UTF-8'/>
	<link rel="stylesheet" href="syntax-highlighter-1.5.1/css/SyntaxHighlighter.css" type="text/css"/>  
    <link rel="stylesheet" href="../src/jplex/components/tooltip/assets/tooltip.css" type="text/css"/>
    <script src="../src/jPlex.js" type="text/javascript" charset="utf-8"></script>
	<script src="./syntax-highlighter-1.5.1/syntax-highlighter.js" type="text/javascript" charset="utf-8"></script> 
	<style type="text/css">
		.jplex-bubble { font-family:"Trebuchet MS", sans-serif; font-size:0.8em;}
		ul span { font-weight:bold; background:#ffff00; padding:0 0.2em 0 0.2em; }
	</style>
</head>
<body>
<h1>jPlex Tooltip Demo</h1>

<ul>
<li>The bubble appears at <span id="info-tr">top-right</span> when hovering the highlighted element.</li>
<li>The bubble appears at top-left when clicking on the highlighted <span id="info-tl">element</span>.</li>
<li>The <span id="info-br">bubble</span> appears at bottom-right when hovering the highlighted element.</li>
<li>The bubble appears at bottom-left when <span id="info-bl">clicking on</span> the highlighted element.</li>
</ul>

<textarea name="code" class="xml">
<ul>
<li>The bubble appears at <span id="info-tr">top-right</span> when hovering the highlighted element.</li>
<li>The bubble appears at top-left when clicking on the highlighted <span id="info-tl">element</span>.</li>
<li>The <span id="info-br">bubble</span> appears at bottom-right when hovering the highlighted element.</li>
<li>The bubble appears at bottom-left when <span id="info-bl">clicking on</span> the highlighted element.</li>
</ul>
</textarea>
<textarea name="code" class="js">
var infotext = "<br />You can put <a href='tooltip.html'>HTML</a> too";

new Tooltip("top-right-bubble", {
    source:"info-tr",
    content:"Top-right corner"+infotext,
    shadowWidth:3
});
new Tooltip("top-left-bubble", {
    source:"info-tl",
    position:"top-left",
    content:"Top-left corner"+infotext,
    trigger:Tooltip.TRIGGER_CLICK
});
new Tooltip("bottom-right-bubble", {
    source:"info-br",
    position:"bottom-right",
    content:"Bottom-right corner"+infotext
});
new Tooltip("bottom-left-bubble", {
    source:"info-bl",
    position:"bottom-left",
    content:"Bottom-left corner"+infotext,
    trigger:Tooltip.TRIGGER_CLICK
});</textarea>
<br /><br /><br /><br /><br /><br />
<script type="text/javascript">
    <!--
    jPlex.include('jplex.components.Tooltip');
	
	var infotext = "<br />You can put <a href='bubble.html'>HTML</a> too";
					
	new Tooltip("top-right-bubble", {
        source:"info-tr",
        content:"Top-right corner"+infotext,
        shadowWidth:3
    });
	new Tooltip("top-left-bubble", {
        source:"info-tl",
        position:"top-left",
        content:"Top-left corner"+infotext,
        trigger:Tooltip.TRIGGER_CLICK
    });
	new Tooltip("bottom-right-bubble", {
        source:"info-br",
        position:"bottom-right",
        content:"Bottom-right corner"+infotext
    });
	new Tooltip("bottom-left-bubble", {
        source:"info-bl",
        position:"bottom-left",
        content:"Bottom-left corner"+infotext,
        trigger:Tooltip.TRIGGER_CLICK
    });

    //-->
</script>
</body>
</html> 